<!DOCTYPE html>
<html>
<head>
<title>Thermodynamics Process Diagram</title>
</head>
<body>
<canvas id="physicsDiagram" width="700" height="350" style="border:1px solid #ccc;"></canvas>

<script>
    const canvas = document.getElementById('physicsDiagram');
    const ctx = canvas.getContext('2d');

    // --- Style and Configuration ---
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    
    // --- Drawing Functions ---
    function drawArrowhead(x, y, angle, size) {
        ctx.beginPath();
        if (angle === 0) { // Right
            ctx.moveTo(x - size, y - size * 0.7);
            ctx.lineTo(x, y);
            ctx.lineTo(x - size, y + size * 0.7);
        } else if (angle === Math.PI / 2) { // Up
            ctx.moveTo(x - size * 0.7, y + size);
            ctx.lineTo(x, y);
            ctx.lineTo(x + size * 0.7, y + size);
        }
        ctx.stroke();
    }

    // --- Main Drawing ---

    // Box and Text settings
    const boxW = 190;
    const boxH = 100;
    const box1Y = 50;
    const textFont = "22px Arial";
    
    // Left Box (Initial State)
    const box1X = 50;
    ctx.strokeRect(box1X, box1Y, boxW, boxH);
    
    ctx.font = textFont;
    ctx.textAlign = 'center';
    const text1X = box1X + boxW / 2;
    ctx.fillText('2.30 \u00D7 10\u207B\u00B3 m\u00B3', text1X, box1Y + 30);
    ctx.fillText('2.60 \u00D7 10\u2075 Pa', text1X, box1Y + 60);
    ctx.fillText('180 K', text1X, box1Y + 90);

    // Right Box (Final State)
    const box2X = 460;
    ctx.strokeRect(box2X, box1Y, boxW, boxH);
    
    const text2X = box2X + boxW / 2;
    ctx.fillText('3.80 \u00D7 10\u207B\u00B3 m\u00B3', text2X, box1Y + 30);
    ctx.fillText('2.60 \u00D7 10\u2075 Pa', text2X, box1Y + 60);
    ctx.fillText('T', text2X, box1Y + 90);

    // Connecting Lines and Arrows
    const midY = box1Y + boxH / 2;
    const line1startX = box1X + boxW;
    const line2endX = box2X;
    const junctionX = (line1startX + line2endX) / 2; // Center point between boxes
    
    // Draw lines
    ctx.beginPath();
    ctx.moveTo(line1startX, midY);
    ctx.lineTo(junctionX, midY);
    ctx.moveTo(junctionX, midY);
    ctx.lineTo(line2endX, midY);
    ctx.moveTo(junctionX, midY + 100);
    ctx.lineTo(junctionX, midY);
    ctx.stroke();

    // Draw arrowheads on lines
    const arrowSize = 10;
    // Arrow 1 (horizontal)
    const arrow1X = (line1startX + junctionX) / 2;
    drawArrowhead(arrow1X, midY, 0, arrowSize);
    
    // Arrow 2 (horizontal)
    const arrow2X = (junctionX + line2endX) / 2;
    drawArrowhead(arrow2X, midY, 0, arrowSize);

    // Arrow 3 (vertical)
    const arrow3Y = midY + 50;
    drawArrowhead(junctionX, arrow3Y, Math.PI / 2, arrowSize);

    // Energy Input Text
    ctx.fillText('980 J', junctionX, midY + 125);

    // Figure Caption
    ctx.font = '20px Arial';
    ctx.fillText('Fig. 2.1', canvas.width / 2, 320);

</script>

</body>
</html>